<template>
    <div class="containe" style="background-color: #f0f0f0;">
        <qiao-nav></qiao-nav>
        <levelMenu types="/qiao/s" @jsonListChange="jsonListChange"></levelMenu>

        <!-- 列表部分 -->
        <div class="cp-container" v-loading="loading">
            <el-row :gutter="20">
                <el-col v-for="(item,index) in list" :key="index" :span="6">
                    <servicelist class="servilist" :listitem="item"></servicelist>
                </el-col>
            </el-row>
            <div>
            </div>
        </div>
        <!-- <div v-if="showNo" style="text-align: center;">暂无数据</div> -->
        <div v-if="showNo" class="f-no-data">
            <i class="i-no-data icon icon-no-data"></i>
            <p>暂无数据</p>
        </div>
        <!-- 分页器部分 -->
        <!-- <div class="foot-pagination"> -->
        <div class="block" style="margin:0px auto; text-align: center;padding:30px 0 80px 0;">
            <el-pagination
                v-if="!showNo"
                background
                layout="prev, pager, next"
                :current-page="jsonList.pageNumber"
                @current-change="handleCurrentChange"
                :page-size="16"
                class="public-page"
                :total="total">
            </el-pagination>
        </div>
        <!-- </div> -->
        <!-- <footerbtm></footerbtm> -->
    </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'nuxt-property-decorator'
import qiaoNav from '~/components/common/qiaoNav.vue'
import levelMenu from '~/components/common/levelMenu.vue'
import servicelist from '~/components/common/servicelist.vue'
import {getList} from '~/api/servicehall/index'
@Component({
    layout: 'qiao',
    components: {
        qiaoNav,
        levelMenu,
        servicelist
    },
    head () {
        return {
            title: 'CIIP供需中心-建筑业供需对接平台',
            meta: [
                {hid: 'description', name: 'description', content: 'CIIP供需中心是建筑行业供需对接平台，可以轻松匹配到适合自己的能力服务、设备租赁和劳动力等方面的的服务和需求。'},
                {hid: 'keyword', name: 'keyword', content: 'CIIP，建筑设计，设备租赁，劳动力'}
            ]
        }
    }
})
export default class Sdetail extends Vue {
    total: number = 0
    currentPage: number = 1
    loading: boolean = false
    showNo: boolean = false
    basefile: string = this.$store.state.basefile
    jsonList:any = {
        classId: '',
        sort: 'DESC',
        sortField: 'createDate',
        areaIds: '',
        pageNumber: 1,
        pageSize: 16,
        serviceName: ''
    }
    list:any = []
    @Watch('$route', {immediate: true})
    routerchange (to: any) {
        this.jsonList.serviceName = to.query.wordText
        this.jsonListChange(this.jsonList)
        if (to.query.id) {
            this.jsonList.classId = to.query.id
            this.getList()
        }
    }
    mounted () {
        this.getList()
    }
    async getList () {
        this.loading = true
        const {data}:any = await getList(this.jsonList)
        if (data.code >= 0) {
            this.list = data.data.content
            for (let i = 0; i < this.list.length; i++) {
                this.list[i].serviceLocationProvince = JSON.parse(this.list[i].serviceLocationProvince)
            }
            if (data.data.totalElements) {
                this.total = data.data.totalElements
            }
        }
        this.loading = false
        if (this.list.length === 0) {
            this.showNo = true
        } else {
            this.showNo = false
        }
    }
    jsonListChange (val:any) {
        // if (this.jsonList.classId !== val.classId) {
        //     this.jsonList.pageNumber = 1
        //     this.currentPage = 1
        // }
        this.jsonList = {
            classId: val.classId || '',
            sort: val.sort || 'DESC',
            sortField: val.sortField || 'createDate',
            areaIds: val.areaIds || '',
            pageNumber: 1,
            pageSize: 16,
            serviceName: val.serviceName || ''
        }
        this.getList()
    }
    handleCurrentChange (val:any) {
        // this.currentPage = val
        this.jsonList.pageNumber = val
        this.getList()
    }
}
</script>
<style lang="scss" scoped>
.servilist{
    margin-bottom: 20px;
}
.containe{
    .left{
        position: absolute;
        z-index: 1;
    }
    .elrow{
        width: 100%;
        height: 52px;
        line-height: 52px;
        background-color: #e3e3e3;
        border-radius: 4px;
        span {
            cursor: pointer;
        }
    }
    .f-box{
        position: relative;
    }
    .f-boxr{
        // position: relative;
    }
    .flleft{
        z-index: 2;
        position: absolute;
        left: 10px;
        color: #11a9e8;
        font-weight: 700;
        font-size: 20px;
    }
    .fllerg{
        z-index: 2;
        position: absolute;
        right: 50px;
        color: #11a9e8;
        font-size: 14px;
        font-weight: 700;
    }
    .fllefts{
        z-index: 2;
        position: absolute;
        right: 200px;
        font-size: 16px;
        color: #333333;
    }
    .fllergs{
        z-index: 2;
        position: absolute;
        right: 30px;
        font-size: 14px;
        color: #666666;
    }
    .content-body{
        cursor: pointer;
        min-height: 100px;
        width: 100%;
        background-color: #fff;
        border-radius: 4px;
        margin: 20px auto;
    }
    .allification{
        color: #11a9e8;
    }
    .firstLine{
        display: flex;
        width: 100%;
        height: 56px;
        line-height: 56px;
    }
    .firstLine>span{
        width: 100px;
        text-align: center;
        font-size: 14px;
    }
    .line{
        width: 96%;
        height: 1px;
        background-color: #f3f5f7;
        margin-left: 2%;
    }
    .content-box{
        // width: 390px;
        width: 100%;
        // height: 338px;
        border-radius: 4px;
        display: flex;
        // justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        // float: left;
        .content-father{
            width: 24.15%;
            background-color: #fff;
            margin: 5px;
        }
        .content-father:hover{
            width: 24.15%;
            background-color: #fff;
            margin: 5px;
        }
        // .content-son{
        //     // display: flex;
        //     // flex-direction: column;
        //     width: 290px;
        //     // height: 340px;
        //     // width: 100%;
        //     margin: 0 auto;
        //     padding: 20px;
        //     .pictire{
        //         width: 240px;
        //         height: 180px;
        //         background-color: #666666;
        //     }
        // }
        // .authentication{
        //     position: absolute;
        //     display: inline-block;
        //     width: 60px;
        //     height: 22px;
        //     line-height: 22px;
        //     background-color: #a9d2c9;
        //     color: #fff;
        //     font-size: 12px;
        //     text-align: center;
        // }
        // .house-day{
        //     position: relative;
        // }
        // .flspan{
        //     float: right;
        // }
        // .build-titles{
        //     width: 100%;
        //     font-size: 16px;
        //     // text-align: center;
        //     margin-bottom: 20px;
        // }
        // .nearnum{
        //     width: 100%;
        //     font-size: 14px;
        //     color: #666666;
        //     margin-bottom: 3px;
        // }
        // .moneys{
        //     width: 100%;
        //     height: 56px;
        //     line-height: 56px;
        // }
        // .much{
        //     color: #ff5a5a;
        //     font-size: 20px;
        // }
        // .days{
        //     font-size: 14px;
        // }
        // .address{
        //     float: right;
        //     margin-right: 15px;
        //     font-size: 12px;
        //     color: #999999;
        // }
        // .mybtn{
        //     width: 100px;
        //     height: 32px;
        //     background-color: #fff;
        //     color: #6cc1ee;
        //     border: 2px solid #6cc1ee;
        //     display: inline-block;
        //     line-height: 32px;
        //     text-align: center;
        //     border-radius: 4px;
        // }
        // .company{
        //     width: 100%;
        //     height: 50px;
        //     background-color: #f3fbfe;
        //     border-radius: 0px 0px 4px 4px;
        //     margin-top: 24px;
        //     line-height: 50px;
        //     padding-left: 15px;
        // }
    }
    // .evaluate {
    //     width: 100%;
    //     height: 20px;
    //     line-height: 20px;
    //     position: relative;
    //     .img-qy{
    //         position: absolute;
    //     }
    //     .ping{
    //         margin-left: 25px;
    //         background-color: #ffefdb;
    //         color: #f5c697;
    //         text-align: center;
    //         border-radius: 2px;
    //         border: 1px solid #ffad4d;
    //     }
    //     .num{
    //         width: 36px;
    //         color: #f5c697;
    //         text-align: center;
    //         border-radius: 2px;
    //         border: 1px solid #ffad4d;
    //         border-left-width: 0px;
    //     }
    // }
    .evaluate span{
        display: inline-block;
        font-size: 10px;
        width: 18px;
        height: 18px;
        line-height: 18px;
    }
}
.containe::v-deep li.number{
        margin: 0 5px;
        background-color:#fff;
        color: #606266;
        min-width: 30px;
        border-radius: 2px;
    }
</style>
